跳到主要内容

添加 3D 内容

概述​

Egret Pro 是白鹭引擎于 2019 年开发的 2D/3D 可视化编辑器。

如果您希望在现有项目中添加3D内容，可以将EgretPro项目导出为一个白鹭第三方库，然后在 Egret 项目中通过导入外部库的方式进行使用。

使用方式​

步骤一：创建 EgretPro 项目​

  1. 下载并安装 EgretPro 1.6 或者更高版本
  2. 打开EgretPro,选择 新建 -> 库项目，如果新建项目类型中没有库项目，请确认创建项目面板中的引擎版本号为 1.6.0 或更高版本。
  3. 点击浏览按钮，选择一个 Egret 项目根路径。确认后将项目路径处的新项目名称 NewProject 修改为pro-library
  4. 点击创建按钮，创建成功后，您的项目结构应如下所示
|-- root
  |-- resource
  |-- libs
  |-- src
  |-- pro-library
  |-- resource
  |-- src
  |-- egretpro.json
  |-- egretProperties.json

步骤二：将 EgretPro 项目导出为第三方库​

通过VS Code 打开刚刚创建好的项目 在项目根目录执行

npm  install
npm run build:library

即可将当前项目打包成一个js库，位置是pro-library

步骤三：将生成的 pro-library 导入 Egret 项目​

修改2d项目 egretProperties.json 中的modules,添加该模块

{
  "modules":[
    // .....
    {
        "name":  "pro-library",
        "path":  "./pro-library/pro-library"  //指向EgretPro库项目的pro-library文件夹 
    }
  ]
}

修改后需要通过执行编译命令，在manifest.json中看到pro-library.js引入即为成功

步骤四：升级2D项目​

2d项目为了可以和EgretPro第三方库兼容，需要进行升级引擎至 5.3.7 版本，开发者可以通过 Egret Launcher 下载最新版本。

下载引擎后，修改index.html,后如下所示

egret.runEgret({
    renderMode:  "webgl",
    audioType:  0,
    calculateCanvasScaleFactor:  function  (context)  {
        const backingStore = context.backingStorePixelRatio  ||
        context.webkitBackingStorePixelRatio  ||
        context.mozBackingStorePixelRatio  ||
        context.msBackingStorePixelRatio  ||
        context.oBackingStorePixelRatio  ||
        context.backingStorePixelRatio  ||  1;
        return  (window.devicePixelRatio  ||  1)  / backingStore;
    },
    // 需要修改为true,以启动 EgretPro 环境
    pro:  true,
});

步骤五：在Egret 项目中添加 EgretPro 内容​

目前可以将 EgretPro 中的场景渲染为一个egret.Texture对象，Egret引擎只需要将egret.Texture添加到Bitmap对象当中，即可渲染到舞台。

const width =  512;
const height =  512;
const sceneUrl =  "assets/scenes/animations/test.scene.json";
const texture =  await egret.pro.createTextureFrom3dScene(sceneUrl, width *  2, height *  2);
const bitmap =  new  egret.Bitmap(texture);
bitmap.width  = width;
bitmap.height  = height;
this.addChild(bitmap);

编译运行即可

如何在 EgretPro 和 Egret项目之间进行交互​

EgretPro 与2d引擎间提供了几个方法用于函数调用以及通讯。EgretPro项目与Egret2d项目都可通过 egret.pro 进行调用。

declare  namespace egret.pro  {
  /*
 * 执行方法
 * 通过传入命令的字符串，获取已注册的方法并执行，参数为可变参数
 * 执行方法可获取到方法的返回值
 * 若找到注册该方法，会报出警告并返回 null
 * @param  command
 * @param  thisObject
 * @param  args
 */
  export  function  execute(command: string,  ...args: any[]):  any;
  /*
 * 注册方法
 * 根据传入字符串名称，注册方法
 * 同一个名称的方法只能注册一次，相同名称会报出警告
 * @param  command
 * @param  func
 * @param  thisObject
 */
  export  function  register(command:  string,  func:  (...args: any[])  =>  any, thisObject:  any):  void;
  /*
 * 注册事件
 * @param  eventType
 * @param  target
 * @param  func
 * @param  thisObject
 */
  export  function  addEventListener(eventType:  string, target:  any,  func:  (...args: any[])  =>  void, thisObject:  any):  void;
  /*
 * 移除事件
 * @param  eventType
 * @param  target
 * @param  func
 */
  export  function  removeEventListener(eventType:  string, target:  any,  func:  (...args: any[])  =>  void):  void;
  /*
 * 派发事件
 * @param  command
 * @param  target
 * @param  args
 */
  export  function  dispatch(command: string, target: any,  ...args: any[]):  void;
}